<template>
  <div>
    <el-collapse>
      <el-collapse-item title="条件搜索" style="margin-left: 16px">

        <el-form :inline="true" :model="sizeForm" label-width="90px" size="mini">
          <el-form-item label="数据时间">
            <el-date-picker
              v-model="dataTime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="监控状态">
            <el-select v-model="sizeForm.account" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
              <el-option label="监控中" value="2"></el-option>
              <el-option label="未监控" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="账号">
            <el-select v-model="sizeForm.ban" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="被投视频">
            <el-select v-model="sizeForm.douyin" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商品">
            <el-select v-model="sizeForm.baiying" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="运营人">
            <el-select v-model="sizeForm.tag" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <el-card shadow="always" style="margin-top: 10px">
      <el-button type="primary" style="margin: 0 15px 5px 0;float:right;" icon="el-icon-plus" size="small"
                 @click="handleMonitorDialog">监控任务
      </el-button>
      <el-button type="primary" style="margin: 0 15px 5px 0;float:right;" size="small">开启自动私密
      </el-button>
    </el-card>

    <el-card shadow="always" style="margin-top: 10px">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        max-height="500"
        fit border>
        </el-table-column>
        <el-table-column
          fixed="left"
          label="编号"
          align="center"
          width="50"
          type="index">
        </el-table-column>
        <el-table-column
          label="被投视频"
          width="150"
          align="center">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="700"
              trigger="hover">
              <el-row>
                <el-col :span="5">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.cover"
                    fit="cover"></el-image>
                </el-col>
                <el-col :span="19">
                  <el-link :href="scope.row.share_url" :underline="false" target="_blank">{{scope.row.title}}</el-link>
                </el-col>
              </el-row>
              <el-link type="text" :underline="false" slot="reference">{{scope.row.title | ellipsis}}</el-link>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="所属账号"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="status"
          label="监控状态"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="监控开始"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          label="播放增量"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          label="点赞增量"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="有效佣金"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="退款率"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="预估消耗"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="净佣金ROI"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="发布时间"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="商品渠道"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="商品"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="监控结束"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="播放总量"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="评论总量"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="评论增量"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="点赞总量"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="全部销售额"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="有效销售额"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="已付款佣金"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="退款销售额"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="全部佣金"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="已结算佣金"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="已结算佣金"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="已付款单数"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="有效单数"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="全部单数"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="退款佣金"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="已结算单数"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="已结算单数"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="退款单数"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="未付款单数"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="未付款率"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="有效佣金ROI"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="预估亏盈"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="预估净利润"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="销售额ROI"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="万次播放有效佣金"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="万次播放有效出单"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="有效单笔价"
          align="center"
          width="120">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <el-drawer
      title="创建监控任务"
      :before-close="handleMonitorClose"
      :visible.sync="monitorDialog"
      direction="rtl"
      ref="drawer"
      size="30%"
      close-on-press-escape>
      <el-divider></el-divider>
      <div>
        <el-form :rules="monitorCheck" ref="monitorForm" :model="monitor" label-width="90px">
          <el-form-item label="抖音号：" prop="douyin">
            <el-select v-model="monitor.douyin" placeholder="请选择" @focus="getDouyinID" @change="handleDouyinId">
              <el-option
                v-for="item in douyinid"
                :key="item.openId"
                :label="item.nickname"
                :value="item.openId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-button type="text" size="mini" style="margin-left: 260px" @click="auth">没有要监控的抖音号？点此立即绑定</el-button>
          <el-form-item label="选择视频:" prop="video">
            <el-button type="primary" style="width: 300px;align-content: center" v-if="!monitorVideoTitle"
                       @click="handleInnerDrawer">
              点击选择
            </el-button>
            <el-button type="primary" style="width: 300px;align-content: center" v-if="monitorVideoTitle"
                       @click="handleInnerDrawer">
              {{monitorVideoTitle | ellipsis}}
            </el-button>
            <el-drawer
              title="我是里面的"
              :with-header="false"
              :append-to-body="true"
              size="50%"
              :before-close="handleInnerMonitorClose"
              :visible.sync="innerDrawer">
              <div style="height: 800px;overflow:auto" infinite-scroll-distance="3" v-infinite-scroll="load">
                <el-radio v-model="monitorVideo" :label="item.item_id" v-for="(item,index) in videoListInfo"
                          :key="index"
                          @change="radioVideo">
                  <el-row>
                    <el-col :span="4">
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="item.cover"
                        fit="cover"></el-image>
                    </el-col>
                    <el-col :span="20">
                      <div>{{item.title}}</div>
                      <div>点赞数：{{item.statistics.digg_count}}</div>
                      <div> 播放数：{{item.statistics.play_count}}</div>
                    </el-col>
                  </el-row>
                  <el-divider></el-divider>
                </el-radio>
              </div>
            </el-drawer>
          </el-form-item>
          <el-form-item label="Dou+：">
            <el-radio-group v-model="monitor.resource" @change="handleRadioGroup">
              <el-radio label="1">开启</el-radio>
              <el-radio label="2">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Dou+方案：" v-if="isShowDou">
            <el-input v-model="monitor.program"></el-input>
          </el-form-item>
        </el-form>
        <div class="btn-block" align="center">
          <el-button type="primary" style="width: 300px;align-content: center" @click="createMonitor">
            创建监控
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {douyinOauth, getDouyinList} from "@/api/work/douyinOuath";
  import {videoList, videoDetail, save, monitorVideoList, userInfo} from "@/api/work/video/video";
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  export default{
    components: {
      ElCol,
      ElRow
    },
    data(){
      return {
        count: 10,
        loading: false,
        pageSize: 0,
        currentPage: 0,
        total: 0,
        monitorDialog: false,
        innerDrawer: false,
        isShowDou: true,
        douyinOpenId: '',
        monitorVideoTitle: '',
        monitorVideo: '',
        monitorVideoData: {},
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        douyinid: [{
          nickname: '',
          openId: ''
        }],
        accountList: [],
        accountObj: {
          openId: '',
          cursor: 0
        },
        sizeForm: {},
        dataTime: '',
        monitor: {
          resource: '1'
        },
        videoListInfo: [],
        tableData: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        monitorCheck: {
          douyin: [
            {required: true, message: '请输入抖音号', trigger: 'blur'}
          ]
        }
      }
    },
    filters: {
      ellipsis(value) {
        if (!value) return "";
        if (value.length > 5) {
          return value.substr(0, 5) + "...";
        }
        return value;
      }
    },
    created(){
      this.monitorVideoList()
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val - 1
        this.monitorVideoList();
      },
      handleMonitorDialog(){
        this.monitor = {
          resource: '1'
        }
        this.monitorVideoTitle = ''
        this.monitorDialog = true
      },
      handleSelectionChange(val){
        console.log(val)
      },
      handleRadioGroup(val){
        console.log(val)
        if (val == 1) {
          this.isShowDou = true
        } else {
          this.isShowDou = false
        }
      },
      auth(){
        douyinOauth().then(response => {
          console.log("授权", response)
          window.location.href = response.data
        });
      },
      handleInnerDrawer(){
        console.log(this.douyinOpenId)
        if (this.douyinOpenId !== '') {
          this.innerDrawer = true
          this.douyinVideoList();
        } else {
          this.$message.warning("选择抖音号")
        }
      },
      douyinVideoList(){
        this.accountList = []
        //获取下拉列表抖音id
        this.accountObj.openId = this.douyinOpenId
        this.accountObj.cursor = 0
        this.accountList.push(this.accountObj)
        videoList(this.accountList).then(response => {
          const result = response.data[0].data.list
          console.log("视频列表", response)
          this.accountObj.cursor = response.data[0].data.cursor
          this.videoListInfo = result
        });
      },
      douyinRefreshVideoList(){
        this.accountObj.openId = this.douyinOpenId
        this.accountObj.cursor = this.accountObj.cursor
        console.log('cursor', this.accountObj.cursor)
        this.accountList = []
        this.accountList.push(this.accountObj)
        videoList(this.accountList).then(response => {
          const result = response.data[0].data.list
          console.log("douyinRefreshVideoList", response)
          this.accountObj.cursor = response.data[0].data.cursor
          this.videoListInfo = this.videoListInfo.concat(result)
        });
      },
      /*加载*/
      load(){
        this.douyinRefreshVideoList();
      },
      handleMonitorClose(){
        this.monitorDialog = false;
      },
      handleInnerMonitorClose(){
        this.innerDrawer = false;
      },
      createMonitor() {
        this.$refs.monitorForm.validate((valid) => {
          if (valid) {
            console.log('douyinOpenId', this.douyinOpenId)
            console.log('monitorVideoData', this.monitorVideoData)
            console.log('program', this.monitor.program)
            let data = {
              openId: '',
              monitorVideo: {
                openId: ''
              },
              douyinAdd: ''
            }
            data.openId = this.douyinOpenId
            data.monitorVideo = this.monitorVideoData
            data.douyinAdd = this.monitor.program
            data.monitorVideo['open_id'] = this.douyinOpenId
            data.monitorVideo['statistics'] = ''
            console.log('data', data)
            save(data).then(response => {
              if (response.code === 200) {
                this.monitorDialog = false;
                this.$message.success("成功创建视频监控")
              }
              console.log(response)
            });
          } else {
            return false;
          }
        });
      },
      radioVideo(val){
        let itemIds = []
        itemIds.push(val)
        videoDetail(this.douyinOpenId, itemIds).then(response => {
          const result = response.data.data.list[0].title
          this.monitorVideoData = response.data.data.list[0]
          this.monitorVideoTitle = result
          this.innerDrawer = false;
        });
      },
      handleRowClick(row, column, event){
        console.log(row)
        console.log(column)
        console.log(event)
        this.$router.push({
          path: `/video/videoDetails`,
          query: {
            id: row.item_id
          }
        })
      },
      /*获取抖音列表*/
      getDouyinID(){
        getDouyinList().then(response => {
          this.douyinid = response.data
        })
      },
      /*获取数据库列表*/
      monitorVideoList(){
        monitorVideoList(this.currentPage).then(response => {
          console.log('获取数据库列表', response)
          const result = response.data.list
          this.tableData = result
          this.total = response.data.total
        })
      },
      /*获取用户信息*/
      /* userInfo(val){
       userInfo(val).then(response => {
       const result = response.data[0]
       this.tableData.nickname = result.nickname
       console.log('获取用户信息', response.data[0])
       })
       },*/
      handleDouyinId(val){
        this.douyinOpenId = ''
        this.douyinOpenId = val
      }
    }
  }
</script>

<style>
  .btn-block {
    position: absolute;
    top: 660px;
    left: 0;
    right: 0;
  }
</style>
